<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>D站</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link rel="icon" th:href="@{/pagesResource/img/icon.png}">
	<link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/animate.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/bootstrap.min.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/flatpickr.min.css}">
<!--	<link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/fontello.css}">-->
<!--	<link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/fontello-codes.css}">-->
<!--	<link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/thumbs-embedded.css}">-->
	<link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/iconfont.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/style.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/responsive.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/color.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/rechargeCoinRes/css/amazeui.min.css}" />
	<link rel="stylesheet" type="text/css" th:href="@{/rechargeCoinRes/css/main.css}" />
</head>
<body>
	<div class="wrapper">
		<div th:include="main/simpleHeader :: header"></div>
	</div>
	<div class="pay">
		<!--主内容开始编辑-->
		<div class="tr_recharge" style="height: ">
			<div class="tr_rechtext">
				<p class="te_retit"><img th:src="@{/rechargeCoinRes/images/coin.png}" alt="" />充值中心</p>
				<p>1.硬币是DStation推出的虚拟货币，你可以使用硬币来支持喜欢的视频。</p>
				<p>2.硬币与人民币换算为10:1，即1元=10硬币，你可以选择使用支付宝充值，硬币个数必须是10的整数倍。</p>
			</div>
			<form action="" class="am-form" id="doc-vld-msg">
				<div class="tr_rechbox">
					<div class="tr_rechhead">
						<img th:src="@{/images/userIcon/{userIc}(userIc=${session.userInfo.userIcon})}" />
						<p>充值帐号：
							<a th:utext="${session.userInfo.userName}">王凯</a>
						</p>
						<div class="tr_rechheadcion">
							<img th:src="@{/rechargeCoinRes/images/coin.png}" alt="" />
							<span>当前余额：<span th:text="${session.userInfo.userBalance} + 硬币">0硬币</span></span>
						</div>
					</div>
					<div class="tr_rechli am-form-group">
						<ul class="ui-choose am-form-group" id="uc_01">
							<li>
								<label class="am-radio-inline">
										<input type="radio"  value="10" name="docVlGender" required data-validation-message="请选择一项充值额度"> 10￥
									</label>
							</li>
							<li>
								<label class="am-radio-inline">
										<input type="radio" value="20" name="docVlGender" data-validation-message="请选择一项充值额度"> 20￥
									</label>
							</li>

							<li>
								<label class="am-radio-inline">
										<input type="radio" value="50" name="docVlGender" data-validation-message="请选择一项充值额度"> 50￥
									</label>
							</li>
							<li>
								<label class="am-radio-inline">
										<input type="radio" name="docVlGender" data-validation-message="请选择一项充值额度"> 其他金额
									</label>
							</li>
						</ul>
						<!--<span>1招兵币=1元 10元起充</span>-->
					</div>
					<div class="tr_rechoth am-form-group">
						<span>其他金额：</span>
						<input type="number" min="10" max="10000" value="10.00元" class="othbox" data-validation-message="充值金额范围：10-10000元" />
						<!--<p>充值金额范围：10-10000元</p>-->
					</div>
					<div class="tr_rechcho am-form-group">
						<span>充值方式：</span>
						<label class="am-radio" style="margin-right:30px;">
								<input type="radio" name="radio1" value="" data-am-ucheck data-validation-message="请选择一种充值方式"><img th:src="@{/rechargeCoinRes/images/zfbpay.png}"/>
                        </label>
					</div>
					<div class="tr_rechnum">
						<span>应付金额：</span>
						<p class="rechnum">0.00</p>
					</div>
                    <div class="btn-sbmit">
                        <button type="button" id="submitVideoInfo">充值</button>
                    </div>
				</div>
			</form>
		</div>
	</div>
    <script type="text/javascript" th:src="@{/pagesResource/js/jquery.min.js}"></script>
	<script type="text/javascript" th:src="@{/rechargeCoinRes/js/amazeui.min.js}"></script>
	<script type="text/javascript" th:src="@{/rechargeCoinRes/js/ui-choose.js}"></script>
    <script src="/js/sweetAlert.js"></script>
	<script th:src="@{/pagesResource/js/script.js}"></script>
	<script type="text/javascript">
		// 将所有.ui-choose实例化
		$('.ui-choose').ui_choose();
		// uc_01 ul 单选
		var uc_01 = $('#uc_01').data('ui-choose'); // 取回已实例化的对象
		uc_01.click = function(index, item) {
			console.log('click', index, item.text())
		}
		uc_01.change = function(index, item) {
			console.log('change', index, item.text())
		}
		$(function() {
			$('#uc_01 li:eq(3)').click(function() {
				$('.tr_rechoth').show();
				$('.tr_rechoth').find("input").attr('required', 'true')
				$('.rechnum').text('10.00');
			})
			$('#uc_01 li:eq(0)').click(function() {
				$('.tr_rechoth').hide();
				$('.rechnum').text('10.00');
				$('.othbox').val('');
			})
			$('#uc_01 li:eq(1)').click(function() {
				$('.tr_rechoth').hide();
				$('.rechnum').text('20.00');
				$('.othbox').val('');
			})
			$('#uc_01 li:eq(2)').click(function() {
				$('.tr_rechoth').hide();
				$('.rechnum').text('50.00');
				$('.othbox').val('');
			})
			$(document).ready(function() {
				$('.othbox').on('input propertychange', function() {
					var num = $(this).val();
					$('.rechnum').html(num + ".00");
				});
			});
		})

		$(function() {
			$('#doc-vld-msg').validator({
				onValid: function(validity) {
					$(validity.field).closest('.am-form-group').find('.am-alert').hide();
				},
				onInValid: function(validity) {
					var $field = $(validity.field);
					var $group = $field.closest('.am-form-group');
					var $alert = $group.find('.am-alert');
					// 使用自定义的提示信息 或 插件内置的提示信息
					var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

					if(!$alert.length) {
						$alert = $('<div class="am-alert am-alert-danger"></div>').hide().
						appendTo($group);
					}
					$alert.html(msg).show();
				}
			});
		});
	</script>

    <script>
        /**
         * 点击充值按钮
         */
        $("#submitVideoInfo").click(
            function () {
                var money = $('.rechnum').text();  //支付的钱
                if(money == "" || money == null) {
                    swal("Warning", "请输入充值金额！", "warning");
                    return;
                }
                //1. AliPay需要的参数
                var WIDout_trade_no = Date.now();   //根据系统时间获得一个随机数 作为订单号
                var WIDsubject = "购买硬币";    //购买的东西
                var WIDtotal_amount = money;
                var WIDbody = "购买硬币";
                params = {
                    'WIDout_trade_no':WIDout_trade_no,
                    'WIDsubject':WIDsubject,
                    'WIDtotal_amount':WIDtotal_amount,
                    'WIDbody':WIDbody,
                    'subPackType':0,
                };
                Post("/aliPay/payPage",params);
            }
        );

        /*
         *   功能： 模拟form表单的提交
         *   参数： URL 跳转地址 PARAMTERS 参数
        */
        function Post(URL, PARAMTERS) {
            //创建form表单
            var temp_form = document.createElement("form");
            temp_form.action = URL;
            //如需打开新窗口，form的target属性要设置为'_blank'
            temp_form.target = "_self";
            temp_form.method = "post";
            temp_form.style.display = "none";
            //添加参数
            for (var item in PARAMTERS) {
                var opt = document.createElement("textarea");
                opt.name = item;
                opt.value = PARAMTERS[item];
                temp_form.appendChild(opt);
            }
            document.body.appendChild(temp_form);
            //提交数据
            temp_form.submit();
        }

        /**
         * 个人主页
         * @param userId
         */
        function userMainPage(userId) {
            window.location.href = "/user/userMainPage?userId=" + userId;
        }
    </script>
</body>

</html>